<template>
      <div class="app-body">
            <el-row>
                  <el-col :span="12" :offset="6">
                        <el-input placeholder="请输入要解析的网址" v-model="inputText" clearable @keyup.enter.native="convertText"></el-input>
                  </el-col>
            </el-row>
            <el-row> </el-row>
            <el-row>
                  <el-col :span="12" :offset="6">
                        <el-card v-if="result.length > 0">
                              <div slot="header">
                                    <span
                                          >结果
                                          <el-button size="mini" @click="show">查看分析</el-button>
                                    </span>
                              </div>
                              <el-col class="item-box" :span="24" v-for="item in result" :key="item.id">
                                    <el-tag :type="item.state == 1 ? 'success' : item.state == -1 ? 'danger' : item.state == 2 ? 'warning' : 'info'">{{
                                          item.state == 1 ? "褒义" : item.state == -1 ? "贬义" : item.state == 2 ? "字数不足" : "中性"
                                    }}</el-tag>
                                    {{ item.line }}
                              </el-col>
                        </el-card>
                  </el-col>
            </el-row>
            <el-dialog title="分析" :visible.sync="formVisible" width="30%" :before-close="$utils.handleClose">
                  <el-col :span="24" id="main"></el-col>
            </el-dialog>
      </div>
</template>

<script>
export default {
      name: "",
      props: [],
      data() {
            return {
                  inputText: "",
                  formVisible: false,
                  result: [
                  ],
                  chart: "",
                  series:[]
            };
      },
      methods: {
            show() {
                  this.formVisible = true;
                  this.series=[];
                  let success={
                    name:'褒义',
                    value:0
                  }
                  let danger={
                    name:'贬义',
                    value:0
                  }
                  let info={
                    name:'中性',
                    value:0
                  }
                  let warning={
                    name:'字数不足',
                    value:0
                  }
                  this.result.forEach(item=>{
                    if(item.state==1){
                        success.value++;
                    }else if(item.state==-1){
                        danger.value++;
                    }else if(item.state==2){
                        warning.value++;
                    }else{
                        info.value++;
                    }
                  })
                  this.series.push(success);
                  this.series.push(danger);
                  this.series.push(warning);
                  this.series.push(info);
                  setTimeout(() => {
                    this.initEcharts();
                  }, 1000);
                  
            },
            convertText: function() {
                  this.$root.loading = true;
                  let formData = new FormData();
                  formData.append("url", this.inputText);
                  // 发送 POST 请求，将 inputText 提交给服务器
                  this.$axios({
                        url: this.$url + "/client/senta/smzdm",
                        method: "POST",
                        data: formData,
                  }).then((res) => {
                        this.result = res.data.data.sentaList;
                  });
            },
            initEcharts() {
                  var chartDom = document.getElementById("main");
                  this.echarts = this.$echarts.init(chartDom);
                  var option = {
                        tooltip: {
                              trigger: "item",
                        },
                        legend: {
                              orient: "vertical",
                              left: "left",
                        },
                        series: [
                              {
                                    name: "Access From",
                                    type: "pie",
                                    radius: "50%",
                                    data: this.series,
                                    emphasis: {
                                          itemStyle: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: "rgba(0, 0, 0, 0.5)",
                                          },
                                    },
                              },
                        ],
                  };

                  option && this.echarts.setOption(option);
            },
      },
};
</script>

<style scoped>
#main {
      width: 400px;
      height: 400px;
}
.item-box {
      padding: 20px 0;
}
/* 页面全局样式 */
.app-body {
      background-color: #f5f5f5;
      font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
      height: 100%;
      overflow: auto;
}

/* 输入框样式 */
.el-input__inner {
      height: 40px;
      border-radius: 20px;
      border: none;
      background-color: #fff;
      padding-left: 20px;
      font-size: 16px;
      color: #333;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      transition: box-shadow 0.3s ease-in-out;
}

.el-input__inner:focus {
      outline: none;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* 按钮样式 */
.el-button {
      border-radius: 20px;
      background-color: #409eff;
      color: #fff;
      border: none;
      transition: background-color 0.3s ease-in-out;
}

.el-button:hover {
      background-color: #66b1ff;
}

/* 结果卡片样式 */
.el-card__header {
      font-size: 20px;
      font-weight: bold;
      color: #333;
}

.el-alert__title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
}

.el-alert__content {
      font-size: 16px;
      color: #333;
}
</style>
